<template>
    <div class="content">
      <LoginTop />
      <div class="main">
        <div class="fish-list">
          <div
            v-for="fish in seafishData"
            :key="fish.id"
            class="fish-item"
            @click="goToFishDetails(fish.id)"
          >
            <img :src="fish.image" :alt="fish.name" class="fish-image" />
            <div class="fish-info">
              <span class="fish-name">{{ fish.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="fish-user">
                用户:
                {{ fish.user }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="load-more">
        <button @click="loadMore" :disabled="noMoreData">加载更多</button>
      </div>
    </div>
</template>

<script setup>
import LoginTop from "./LoginTop.vue"
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import request from "../../../api/request";

const seafishData = ref([]);
const currentPage = ref(1);
const noMoreData = ref(false);
const router = useRouter();

const fetchData = async (page) => {
  try {
    const response = await request.get("latest", {
      params: {
        page: page,
      },
    });

    if (response.data.data.length === 0) {
      noMoreData.value = true;
    } else {
      seafishData.value = seafishData.value.concat(response.data.data);
      currentPage.value++;
    }
  } catch (error) {
    console.error(error);
  }
};

const loadMore = () => {
  fetchData(currentPage.value);
};

const goToFishDetails = (id) => {
  router.push({ name: "FishDetails", params: { id } });
};

onMounted(() => fetchData(currentPage.value));
</script>

<style scoped>
.content {
flex: 1;
padding: 1rem;
overflow-y: auto;
padding: 0px;
}
.main {
  display: flex;
  justify-content: center;
}
.fish-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.fish-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  width: 350px;
  height: 220px;
}
.fish-info {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.fish-name {
  font-size: 1rem;
  font-weight: bolder;
}
.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.fish-image {
  width: 100%;
  height: 150px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 8px;
  object-fit: cover;
  transition: background-color 0.3s;
}
</style>
